<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title>Title</title>
    <meta content="" charset="UTF-8">
    <script language="JavaScript" src="script/vue.js"></script>
    <script type="" language="JavaScript">
        window.onload = function () {
            var vue = new Vue({
                        // # 表示id
                        // . 表示class
                        "el": "#div0",
                        "data": {
                            msg: "hello"
                        },
                        // vue实例对象创建之前
                        beforeCreate: function () {
                            console.log("beforeCreate: vue对象创建之前");
                            console.log("msg = " + this.msg);
                        },
                        // vue对象创建之后
                        created: function () {
                            console.log("created: vue对象创建之后");
                            console.log("msg = " + this.msg);
                        },
                        // 数据装载之前
                        beforeMount: function () {
                            console.log("beforeMount: 数据装载之前");
                            var spanValue = document.getElementById("span").innerText;
                            console.log("msg = " + spanValue);
                        },
                        // 数据装载之后
                        mounted: function () {
                            console.log("mounted: 数据装载之后");
                            var spanValue = document.getElementById("span").innerText;
                            console.log("msg = " + spanValue);
                        },
                        // 数据更新之前
                        beforeUpdate: function () {
                            console.log("beforeUpdate: 数据更新之前");
                            var spanValue = document.getElementById("span").innerText;
                            console.log("更新的spanValue = " + spanValue);
                            console.log("更新的msg = " + this.msg);
                        },
                        // 数据更新之后
                        updated: function () {
                            console.log("updated: 数据更新之后");
                            var spanValue = document.getElementById("span").innerText;
                            console.log("更新的spanValue = " + spanValue);
                            console.log("更新的msg = " + this.msg);
                        }
                        ,
                        methods: {
                            changeMsg: function () {
                                this.msg = this.msg + "D";
                            }
                        }
                    }
                )
            ;
        }
    </script>
</head>
<body>
<div id="div0">
    <span id="span">{{msg}}</span><br/>
    <input type="button" value="更改msg的值" @click="changeMsg"></input>
</div>
</body>
</html>